<template>
    <div class="companyOperations-box">
        <div class="companyOperations-header">
            <slot></slot>
            <el-popover placement="bottom" :visible="popoverVisible" :width="60" trigger="click" :teleported="false"
                :popper-style="{ 'min-width': '60px !important' }" v-if="props.sift">
                <template #reference>
                    <div class="sift" @click="popoverVisible = true">
                        <i class="iconfont icon-shaixuan"></i>
                    </div>
                </template>
                <div class="siftData" v-for="(item, index) in Timeline" :key="index" @click="optionTime(item, index)">
                    <p :class="{ 'activeTime': index == activeTime }">{{ item.time }}</p>
                </div>
            </el-popover>
        </div>
        <div class="companyOperations-table">
            <el-table :data="firmTable" style="width: 100%; overflow-y: scroll;" :max-height="tableHeight"
                :row-class-name="tableRowClassName" stripe 
                :header-cell-style="{ 'color': `${color}`, 'background': `${bg} !important` }"
                @selection-change="handleSelectionChange" @select="handleSelect">
                <el-table-column type="selection" width="55" fixed />
                <!-- 表格数据 -->
                <el-table-column :prop="item.prop" :fixed="item.fixed" :width="item.width" :label="item.label" align="center" v-for="item in firmTableData">
                    <template #default="scope">
                        <!-- 金额换算万元 -->
                        <div v-if="item.conversion" :class="scope.row[item.prop]">
                            {{ (scope.row[item.prop] / 10000).toFixed(2) }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pageNum">
            <p></p>
            <Pagination :hidden="props.total > 0" :total="props.total" :pageSizes="props.pageSize"
                @pagination="handleChange" @update:page="updatePage" @update:limit="updateLimit" :page="props.page"
                :limit="props.limit" />
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, defineEmits, defineProps } from 'vue'
import Pagination from '@/components/Pagination/index'
let emit = defineEmits(['optionTime', 'handleChange', 'updatePage', 'updateLimitHandler', 'handleSelectionChange'])
// 表格高度
let tableHeight = ref(window.innerHeight - 240)
// 获取点击操作的id
let selectID = ref([])


const props = defineProps({
    color: {
        type: String,
        default: '#333'
    },
    bg: {
        type: String,
        default: '#fff'
    },
    sift: {
        type: Boolean,
        default: true
    },
    pageSize: {
        type: Array,
        default() {
            return [10, 20, 30, 50]
        }
    },
    total: {
        type: Number,
        default: 200,
        required: true
    },
    page: {
        type: Number,
        default: 1,
        required: false
    },
    limit: {
        type: Number,
        default: 10,
    },
    Timeline: {
        type: Array,
        default: [{
            time: '年度',
            index: 0,
        },
        {
            time: '季度',
            index: 1,
        },
        {
            time: '月度',
            index: 2,
        }]
    },
    firmTableData: {
        type: Array,
        default: []
    },
    firmTable: {
        type: Array,
        default: []
    },
})

// 控制弹出框的显示
let popoverVisible = ref(false)

// 处理点击文档其他地方关闭弹出框  
const handleDocumentClick = (event) => {
    if (event.target.innerHTML != '筛选' && event.target.className != 'iconfont icon-shaixuan') {
        popoverVisible.value = false;
    }
};
// 拿到选中的行id
const handleSelect = (row) => {
    selectID.value = []
    if (row.length > 0) {
        row.forEach((value, index) => {
            selectID.value.push(value.orderId)
        })
    }
}
// 选中背景色
const tableRowClassName = ({ row, rowIndex }) => {
    let color = ''
    for (let item of selectID.value.values()) {
        if (item === row.orderId) color = 'table-SelectedRow-bgcolor'
    }
    return color
}
onMounted(() => {
    document.addEventListener('click', handleDocumentClick);
    // 监听浏览器屏幕变化展示对应的高度
    window.onresize = () => {
        return (() => {
            tableHeight.value = window.innerHeight - 240;
        })();
    };
});

// 组件卸载时移除事件监听  
onUnmounted(() => {
    document.removeEventListener('click', handleDocumentClick);
});

// 点击的时间
let activeTime = ref(0)
// 每页显示条目个数
const pageSize = ref([10, 20, 30, 50])


// 选中的时间
const optionTime = (v, i) => {
    activeTime.value = i
    popoverVisible.value = false
    emit('optionTime', v.time)
}
// 分页器大小  当前分页器
const handleChange = (page, pageSize) => {
    emit('handleChange', { page, pageSize })
}
// 当前页面位置发生变化
const updatePage = (val) => {
    emit('updatePage', val)
}
// 条目个数发生变化
const updateLimit = (val) => {
    emit('updateLimitHandler', val)
}

// 选择的列
const handleSelectionChange = (val) => {
    val.forEach(item => {
        item.check = true
    })
    console.log('dasdadada');
    emit('handleSelectionChange', val)
}
</script>
<style scoped lang='scss'>
.companyOperations-box {

    padding: 20px 16px 0 16px;
    box-sizing: border-box;
    height: 100%;

    :deep(.el-date-editor) {
        width: 120px;

    }
    :deep(.el-table){
        --el-table-fixed-left-column: inset 10px 0 10px -6px rgba(0, 0, 0, 0.15);
        --el-table-fixed-right-column: inset -10px 0 10px -6px rgba(0, 0, 0, 0.15);
    }
    :deep(.el-input__wrapper) {
        width: 120px;
    }

    .companyOperations-header {
        margin: 0 20px;
        display: flex;
        align-items: center;

        .sift {
            display: flex;
            align-items: center;
            color: #7386D1;
            margin-right: 20px;
            cursor: pointer;
            margin-bottom: 18px;
            /* x 偏移量 | y 偏移量 | 阴影颜色 */

            .iconfont {
                font-size: 22px;
            }

        }

        .siftData {
            cursor: pointer;
            line-height: 25px;

            p {
                text-align: center;
            }

            .activeTime {
                color: #1947FF;
            }
        }
    }

    .pageNum {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>
